<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>数据统计</a></el-breadcrumb-item>
      <el-breadcrumb-item>房间入住率</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <div class="block">
      <span class="demonstration">请选择时间 </span>
      <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="time"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div>
      <div id="echartsdemo" ref="container"></div>
    </div>
  </div>
</template>

<script>
import * as ec from 'echarts'
export default {
  data(){
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',

      echartsinstance:null,
      options:{
        // 标题设置
        title:{text:'每天入住率'},
        tooltip:{},//提示框
        legend:{// 数据标识
          data:["入住率"]
        },
        // x轴标记
        xAxis:{
          data:[],
          axisLabel:{interval: 0, rotate: 75,}
        },
        // y轴标记
        yAxis:{},
        // 数据系列
        series:[
          {
            name:'入住率',
            type:'bar',
            data:[]
          }
        ]
      }
    }
  },
  methods:{
    time(){
      console.log(this.value2)
      let url = 'http://localhost:9085/statistics/rate';
      console.log('url = ' + url);
      let formData = this.qs.stringify(this.editForm);
      console.log('formData = ' + formData);

      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url+"?value="+this.value2).then((response) => {

        let responseBody = response.data.data;
        let xdata = [];
        let seriesData = [];
        responseBody.forEach((item)=>{
          xdata.push(item.startTime);
          seriesData.push(item.cn);
        })
        this.options.xAxis.data=xdata;
        this.options.series[0].data=seriesData;
        console.log(this.options.series.data);
        this.echartsinstance.setOption(this.options,true);
        if (responseBody.state == 20000) {
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          // this.loadCustomerInput();
          this.dialogFormVisible = false;
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {// eslint-disable-line no-unused-vars
              this.dialogFormVisible = false;
              this.loadCustomerInput();
            }
          });
        }
      });
    },


  },
  mounted(){
    this.echartsinstance = ec.init(this.$refs.container)
    this.echartsinstance.setOption(this.options)
  },
  watch:{
    options(){
      this.echartsinstance.setOption(this.options)

    }
  }
}
</script>
<style >
#echartsdemo{
  width:1200px;
  height: 400px;
}
</style>



